<!--
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style type="text/css">
        h1{text-indent:2em ;}
        p {text-indent:5em ;
            font-size:20px;}
        a{font-size:20px;}
        table {
            border-right: 5px ;
            border-bottom: 5px ;
            border-collapse:collapse;
        }
        table td {
            border-width: 1px ;
            width: 500px;
        }

    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    &lt;!&ndash; The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags &ndash;&gt;
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/offcanvas/">

    &lt;!&ndash;    表单验证插件&ndash;&gt;
    <script src="../static/js/jquery/dist/jquery.validate.min.js"></script>
    <script src="../static/js/jquery/lib/jquery.js"></script>

    <title>器材添加</title>

    &lt;!&ndash; Bootstrap core CSS &ndash;&gt;
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/dist/css/bootstrap.min.css" rel="stylesheet">

    &lt;!&ndash; IE10 viewport hack for Surface/desktop Windows 8 bug &ndash;&gt;
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    &lt;!&ndash; Custom styles for this template &ndash;&gt;
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.css" rel="stylesheet">

    &lt;!&ndash; Just for debugging purposes. Don't actually copy these 2 lines! &ndash;&gt;
    &lt;!&ndash;[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie8-responsive-file-warning.js"></script><![endif]&ndash;&gt;
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie-emulation-modes-warning.js"></script>

    &lt;!&ndash; HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries &ndash;&gt;
    &lt;!&ndash;[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]&ndash;&gt;

    <script type="text/javascript">
        var loadImageFile = (function() {
            if (window.FileReader) {
                var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

                oFReader.onload = function(oFREvent) {
                    if (!oPreviewImg) {
                        var newPreview = document.getElementById("imagePreview");
                        oPreviewImg = new Image();
                        oPreviewImg.style.width = (newPreview.offsetWidth)
                                .toString()
                            + "px";
                        oPreviewImg.style.height = (newPreview.offsetHeight)
                                .toString()
                            + "px";
                        if(newPreview.childNodes.length != 0){
                            newPreview.removeChild(document.getElementById("imgid"));
                        }
                        newPreview.appendChild(oPreviewImg);
                    }
                    oPreviewImg.src = oFREvent.target.result;
                };

                return function() {
                    var aFiles = document.getElementById("imageInput").files;
                    if (aFiles.length === 0) {
                        return;
                    }
                    if (!rFilter.test(aFiles[0].type)) {
                        alert("You must select a valid image file!");
                        return;
                    }
                    oFReader.readAsDataURL(aFiles[0]);
                }

            }
            if (navigator.appName === "Microsoft Internet Explorer") {
                return function() {
                    alert(document.getElementById("imageInput").value);
                    document.getElementById("imagePreview").filters
                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = document
                        .getElementById("imageInput").value;

                }
            }
        })();

    </script>
    <style type="text/css">
        #imagePreview {
            width: 160px;
            height: 120px;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale
            );
        }
    </style>
</head>

<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{../tonotice}">广东海洋大学体育馆管理系统</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a th:href="@{../equipment/toequip}">器材新增</a>
                <li><a th:href="@{../equipment/query}">器材管理</a></li>
                <li><a th:href="@{../game/toGame}">赛事管理</a></li>
                <li><a th:href="@{../court/toCourt}">场地管理</a></li>
                <li><a th:href="@{../tonotice}">回到主页</a></li>
                <li><a th:text="${session.username}"></a></li>
            </ul>
        </div>&lt;!&ndash; /.nav-collapse &ndash;&gt;
    </div>&lt;!&ndash; /.container &ndash;&gt;
</nav>&lt;!&ndash; /.navbar &ndash;&gt;

<div class="equip">

        <form th:action="@{insert}"  enctype="multipart/form-data" method="post">

            <div class="col-xs-10 col-sm-8">
                <p class="pull-right visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                </p>
                <div class="jumbotron">
                    <h1 style="font-size:30px">新增器材</h1>
                    <p style="font-size:15px">器材名称
                        <input type="text" required="required" name="equipname">
                    </p>
                    <p style="font-size:15px">器材类型
                        <input type="text" required="required" name="equipclass">
                    </p>
&lt;!&ndash; style="border:1px solid #7EABAB; padding:5px" &ndash;&gt;
                    <label>图片：</label>
                    <div  >
                        <div id="imagePreview" >
                            <img id="imgid" th:src="@{/img/cost.png}" width="110" height="110" />
                        </div>
                        &lt;!&ndash;  <img id="imgid" src="images/ad20.jpg" width="100" height="100" /> &ndash;&gt;
                    </div>
                    <input id="imageInput" onchange="loadImageFile();" name="pic" type="file" class="offset10 lf" />


                    <button type="submit" class="btn btn-primary" >确认添加</button>
                </div>

            </div>&lt;!&ndash;/row&ndash;&gt;
        </form>
</div>&lt;!&ndash;/row&ndash;&gt;



&lt;!&ndash; Bootstrap core JavaScript
================================================== &ndash;&gt;
&lt;!&ndash; Placed at the end of the document so the pages load faster &ndash;&gt;
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/dist/js/bootstrap.min.js"></script>
&lt;!&ndash; IE10 viewport hack for Surface/desktop Windows 8 bug &ndash;&gt;
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.js"></script>
</body>
</html>
-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>器材添加</title>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/component.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/admin.css}"/>
    <!-- Bootstrap Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap.css}"/>
    <!-- FontAwesome Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/font-awesome.css}"/>
    <!-- Morris Chart Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/morris-0.4.3.min.css}"/>
    <!-- Custom Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/custom-styles.css}"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script th:src="@{./js/JQuery2.1.4.js}"></script>
    <!-- 富文本编辑器 -->

    <script type="text/javascript">
        var loadImageFile = (function() {
            if (window.FileReader) {
                var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                oFReader.onload = function(oFREvent) {
                    if (!oPreviewImg) {
                        var newPreview = document.getElementById("imagePreview");
                        oPreviewImg = new Image();
                        oPreviewImg.style.width = (newPreview.offsetWidth)
                                .toString()
                            + "px";
                        oPreviewImg.style.height = (newPreview.offsetHeight)
                                .toString()
                            + "px";
                        if(newPreview.childNodes.length != 0){
                            newPreview.removeChild(document.getElementById("imgid"));
                        }
                        newPreview.appendChild(oPreviewImg);
                    }
                    oPreviewImg.src = oFREvent.target.result;
                };
                return function() {
                    var aFiles = document.getElementById("imageInput").files;
                    if (aFiles.length === 0) {
                        return;
                    }
                    if (!rFilter.test(aFiles[0].type)) {
                        alert("You must select a valid image file!");
                        return;
                    }
                    oFReader.readAsDataURL(aFiles[0]);
                }
            }
            if (navigator.appName === "Microsoft Internet Explorer") {
                return function() {
                    alert(document.getElementById("imageInput").value);
                    document.getElementById("imagePreview").filters
                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = document
                        .getElementById("imageInput").value;
                }
            }
        })();
    </script>
    <style type="text/css">
        #imagePreview {
            width: 160px;
            height: 120px;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale
            );
        }
    </style>
    <script src="./js/wang.js"></script>
</head>

<body>
<div class="rbody" id="app">
    <div class="top">
        当前位置：后台<i class="fa fa-fw fa-angle-right"></i>器材添加
    </div>
    <div class="main">      <!--主页面-->
        <div class="equip">

            <form th:action="@{insertEquipment}"  enctype="multipart/form-data" method="post">

                <div class="col-xs-10 col-sm-8" style="margin-left: 300px">
                    <p class="pull-right visible-xs">
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                    </p>
                    <div class="jumbotron">
                        <h1 style="font-size:30px;margin-left: 300px">新增器材</h1>
                        <p style="font-size:15px;margin-left: 300px">器材名称
                            <input type="text" required="required" name="etypename">
                        </p>
                        <p style="font-size:15px;margin-left: 300px">器材类型
                            <input type="text" required="required" name="etypeid">
                        </p>
                        <p style="font-size:15px;margin-left: 300px">器材数量
                            <input type="text" required="required" name="borrowcount">
                        </p>
                        <p style="font-size:15px;margin-left: 300px">器材价格
                            <input type="text" required="required" name="efee">
                        </p>
                        <!-- style="border:1px solid #7EABAB; padding:5px" -->
                        <label style="margin-left: 300px">图片：</label>
                        <div  style="margin-left: 300px">
                            <div id="imagePreview" >
                                <img id="imgid" th:src="@{/images/ad20.jpg}" width="110" height="110" />
                            </div>
                            <!--  <img id="imgid" src="images/ad20.jpg" width="100" height="100" /> -->
                        </div>
                        <input style="margin-left: 300px" id="imageInput" onchange="loadImageFile();" name="pic" type="file" class="offset10 lf" />
                        <button style="margin-left: 300px" type="submit" class="btn btn-primary" >确认添加</button>
                    </div>

                </div><!--/row-->
            </form>
        </div><!--/row-->
    </div>

</div>
</body>
<script src="./js/common.js"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.js"></script>
</html>

